<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      服务端渲染：
        html + JS数据在服务端拼接好之后，再传输到浏览器渲染

      客户端渲染：
        访问页面，服务器直接返回一个空白页面，只有一个 空 div
        页面出现数据是等到页面的JS加载完成，然后再操作的页面修改

      如何区分服务端渲染于客户端渲染
        在页面右键，查看网页源代码，看看 body 里面是否有页面真实的内容

      客户端渲染的缺点：
        1. 白屏时间
        2. SEO 不友好

     -->

    <h1>EJS</h1>

    <p><%= msg %></p>

    <ul>
      <% for (let i = 0; i < fruits.length; i++) { %>
      <li><%= fruits[i] %></li>
      <% } %>
    </ul>
  </body>
</html>
